import React, { useState } from "react";

import {Provider } from 'react-redux'
import store from "../../store/reduxExample";



import { connect } from "react-redux";
import Child2 from "./exampleChild2";

export default function ReduxExample(props) {
  const [ cnt,setCnt ] = useState(0);
  // let cnt = 0
  function add(e) {
    setCnt(cnt=>cnt+1)
    //setCnt(cnt+1)
  }
  const ChildComponent1 = ()=> {

    return (
      <div>
        <button onClick={()=>{
          store.dispatch({
            type:'clicked!!',
            payload: {
              color:'blue'
            }
          })
        }} >
          child button
          </button>  
        child components!! 1
      </div>
    )
  }
  
  
  // const ChildWrapper = ()=> {
  //   const mapState = (s)=> {
  //     return {
  //       color: s.color
  //     }
  //   }
  //   return ( connect(mapState)(ChildComponent2)
  //   )
  // }

  return (
    <Provider store={store}>
      <div>
        <input placeholder="hello world" value={cnt} onChange={s=>s} />
        <button onClick={(e)=>{setCnt(cnt+1)}}>add</button>

          <ChildComponent1 />
          
          <Child2 />
      </div>
    </Provider>
  )
}